<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Variable - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />

    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <link id="theme" href="/src/themes/test/css-variables/css/default.css" rel="stylesheet" />

    <style>
      .wrapper {
        display: flex;
        flex-direction: row;
      }

      section {
        width: 25%;
        padding: 0 8px;
      }

      .right-container {
        display: flex;
        height: 100%;
        align-items: center;
      }

      .right-container ion-select {
        padding-top: 0;
        padding-bottom: 0;
      }

      ion-fab-button {
        display: inline-block;
      }

      ion-segment {
        margin-bottom: 8px;
      }

      ion-toolbar ion-segment {
        margin-bottom: 0;
      }

      .icon-section ion-icon {
        font-size: 48px;
      }

      ion-breadcrumbs,
      ion-progress-bar {
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="list">
            <ion-label>Lists</ion-label>
            <ion-icon name="list"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="colors">
            <ion-label>Colors</ion-label>
            <ion-icon name="brush"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="overlays">
            <ion-label>Overlays</ion-label>
            <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>

        <ion-tab tab="list">
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button default-href="/"></ion-back-button>
                <ion-menu-button auto-hide="false"></ion-menu-button>
                <ion-button>Default</ion-button>
                <ion-button fill="solid">Solid</ion-button>
                <ion-button fill="clear">Clear</ion-button>
                <ion-button fill="outline">Outline</ion-button>
              </ion-buttons>

              <ion-title>Default Buttons</ion-title>

              <ion-buttons slot="primary">
                <ion-back-button color="secondary" default-href="/"></ion-back-button>
                <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
                <ion-button color="secondary">Default</ion-button>
                <ion-button color="secondary" fill="solid">Solid</ion-button>
                <ion-button color="secondary" fill="clear">Clear</ion-button>
                <ion-button color="secondary" fill="outline">Outline</ion-button>
              </ion-buttons>
            </ion-toolbar>

            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button class="ion-focused" default-href="/"></ion-back-button>
                <ion-menu-button class="ion-focused" auto-hide="false"></ion-menu-button>
                <ion-button class="ion-focused">Default</ion-button>
                <ion-button class="ion-focused" fill="solid">Solid</ion-button>
                <ion-button class="ion-focused" fill="clear">Clear</ion-button>
                <ion-button class="ion-focused" fill="outline">Outline</ion-button>
              </ion-buttons>

              <ion-title>Focused Buttons</ion-title>

              <ion-buttons slot="primary">
                <ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button>
                <ion-menu-button color="secondary" class="ion-focused" auto-hide="false"></ion-menu-button>
                <ion-button color="secondary" class="ion-focused">Default</ion-button>
                <ion-button color="secondary" class="ion-focused" fill="solid">Solid</ion-button>
                <ion-button color="secondary" class="ion-focused" fill="clear">Clear</ion-button>
                <ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button>
              </ion-buttons>
            </ion-toolbar>

            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button class="ion-activated" default-href="/"></ion-back-button>
                <ion-menu-button class="ion-activated" auto-hide="false"></ion-menu-button>
                <ion-button class="ion-activated">Default</ion-button>
                <ion-button class="ion-activated" fill="solid">Solid</ion-button>
                <ion-button class="ion-activated" fill="clear">Clear</ion-button>
                <ion-button class="ion-activated" fill="outline">Outline</ion-button>
              </ion-buttons>

              <ion-title>Activated Buttons</ion-title>

              <ion-buttons slot="primary">
                <ion-back-button color="secondary" class="ion-activated" default-href="/"></ion-back-button>
                <ion-menu-button color="secondary" class="ion-activated" auto-hide="false"></ion-menu-button>
                <ion-button color="secondary" class="ion-activated">Default</ion-button>
                <ion-button color="secondary" class="ion-activated" fill="solid">Solid</ion-button>
                <ion-button color="secondary" class="ion-activated" fill="clear">Clear</ion-button>
                <ion-button color="secondary" class="ion-activated" fill="outline">Outline</ion-button>
              </ion-buttons>
            </ion-toolbar>

            <ion-toolbar>
              <ion-segment value="default" class="theme-picker">
                <ion-segment-button value="default">
                  <ion-label>Default</ion-label>
                </ion-segment-button>
                <ion-segment-button value="oceanic">
                  <ion-label>Oceanic</ion-label>
                </ion-segment-button>
                <ion-segment-button value="vibrant">
                  <ion-label>Vibrant</ion-label>
                </ion-segment-button>
                <ion-segment-button value="dark">
                  <ion-label>Dark</ion-label>
                </ion-segment-button>
                <ion-segment-button value="toolbar">
                  <ion-label>Toolbar</ion-label>
                </ion-segment-button>
                <ion-segment-button disabled>
                  <ion-label>Disabled</ion-label>
                </ion-segment-button>
              </ion-segment>
            </ion-toolbar>
          </ion-header>

          <ion-content class="ion-padding">
            <ion-breadcrumbs max-items="6" items-before-collapse="3" items-after-collapse="3">
              <ion-breadcrumb href="#">
                <ion-icon slot="start" name="home"></ion-icon>
                Home
              </ion-breadcrumb>
              <ion-breadcrumb href="#documents" class="ion-focused">
                <ion-icon slot="start" name="folder"></ion-icon>
                Documents
              </ion-breadcrumb>
              <ion-breadcrumb href="#folders">
                <ion-icon slot="start" name="folder"></ion-icon>
                Folders
              </ion-breadcrumb>
              <ion-breadcrumb href="#files">
                <ion-icon slot="start" name="folder"></ion-icon>
                Files
              </ion-breadcrumb>
              <ion-breadcrumb href="#projects">
                <ion-icon slot="start" name="folder"></ion-icon>
                Projects
              </ion-breadcrumb>
              <ion-breadcrumb href="#user-research">
                <ion-icon slot="start" name="folder"></ion-icon>
                User Research
              </ion-breadcrumb>
              <ion-breadcrumb>
                <ion-icon slot="start" name="document"></ion-icon>
                Survey.txt
              </ion-breadcrumb>
            </ion-breadcrumbs>

            <div class="wrapper">
              <section>
                <ion-card>
                  <ion-card-header>
                    <ion-card-title>Card Header</ion-card-title>
                  </ion-card-header>

                  <ion-card-content>
                    Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend
                    a week in the woods. Wash your spirit clean.
                  </ion-card-content>
                </ion-card>
                <ion-card>
                  <ion-item>
                    <ion-icon name="pin" slot="start"></ion-icon>
                    ion-item in a card, icon left, button right
                    <ion-button fill="outline" slot="end">View</ion-button>
                  </ion-item>

                  <ion-card-content>
                    This is content, without any paragraph or header tags, within an ion-card-content element.
                  </ion-card-content>
                </ion-card>

                <ion-card>
                  <ion-item href="#" class="ion-activated">
                    <ion-icon name="wifi" slot="start"></ion-icon>
                    Card Link Item 1 activated
                  </ion-item>

                  <ion-item href="#">
                    <ion-icon name="wine" slot="start"></ion-icon>
                    Card Link Item 2
                  </ion-item>

                  <ion-item button class="ion-activated">
                    <ion-icon name="warning" slot="start"></ion-icon>
                    Card Button Item 1 activated
                  </ion-item>

                  <ion-item button class="ion-focused">
                    <ion-icon name="walk" slot="start"></ion-icon>
                    Card Button Item 2 focused
                  </ion-item>
                </ion-card>

                <ion-card>
                  <ion-card-content>
                    <ion-input fill="solid" label="Standard" label-placement="floating" value="Has Initial Value">
                      <ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
                      <ion-note slot="error">Error Text</ion-note>
                    </ion-input>

                    <br />

                    <ion-input fill="outline" helper-text="Helper text" label="Standard" label-placement="floating">
                      <ion-icon slot="end" name="trash"></ion-icon>
                    </ion-input>
                  </ion-card-content>
                </ion-card>
              </section>

              <section>
                <ion-list>
                  <ion-item button>
                    <ion-label>Pokémon Yellow</ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item button>
                    <ion-label>Super Metroid</ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item href="#">
                    <ion-label>Mega Man X</ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item href="#" class="ion-activated">
                    <ion-label>The Legend of Zelda</ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item>
                    <ion-label>Pac-Man</ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item>
                    <ion-label>
                      <h2>Super Mario World</h2>
                      <p>Featuring Luigi</p>
                    </ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item>
                    <ion-label>
                      <h2>Street Fighter II</h2>
                      <p>The Sequel</p>
                    </ion-label>
                    <ion-note slot="end">Note</ion-note>
                  </ion-item>
                  <ion-item-divider>Sliding Items</ion-item-divider>
                  <ion-item-sliding>
                    <ion-item>
                      <ion-label>Half Life</ion-label>
                    </ion-item>
                    <ion-item-options>
                      <ion-item-option>More</ion-item-option>
                    </ion-item-options>
                  </ion-item-sliding>
                  <ion-item-sliding>
                    <ion-item color="secondary">
                      <ion-label>Final Fantasy VII</ion-label>
                    </ion-item>
                    <ion-item-options>
                      <ion-item-option>More</ion-item-option>
                    </ion-item-options>
                  </ion-item-sliding>
                  <ion-item-sliding>
                    <ion-item>
                      <ion-label>Tetris</ion-label>
                    </ion-item>
                    <ion-item-options>
                      <ion-item-option>More</ion-item-option>
                    </ion-item-options>
                  </ion-item-sliding>
                  <ion-item-sliding>
                    <ion-item>
                      <ion-label>Donkey Kong III</ion-label>
                    </ion-item>
                    <ion-item-options>
                      <ion-item-option>More</ion-item-option>
                    </ion-item-options>
                  </ion-item-sliding>
                  <ion-item-sliding>
                    <ion-item>
                      <ion-label>Goldeneye 007</ion-label>
                    </ion-item>
                    <ion-item-options>
                      <ion-item-option disabled="true">More</ion-item-option>
                    </ion-item-options>
                  </ion-item-sliding>
                </ion-list>
              </section>

              <section>
                <ion-list>
                  <ion-radio-group id="fruitRadio" value="grape">
                    <ion-item-divider>
                      <ion-label>Fruits</ion-label>
                    </ion-item-divider>
                    <ion-item>
                      <ion-radio value="apple">Apple</ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-radio id="grapeChecked" value="grape" disabled>Grape, checked, disabled</ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-radio color="danger" value="cherry">Cherry</ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>

                <ion-list>
                  <ion-radio-group id="fruitRadio" value="lettuce">
                    <ion-item-divider>
                      <ion-label>Veggies</ion-label>
                    </ion-item-divider>
                    <ion-item>
                      <ion-radio color="tertiary" value="celery">Celery</ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-radio color="tertiary" value="lettuce" disabled>Lettuce, checked, disabled</ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-radio color="tertiary" value="onion">Onion</ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>

                <ion-list>
                  <ion-item>
                    <ion-range aria-label="Range" value="20"></ion-range>
                  </ion-item>

                  <ion-item>
                    <ion-range aria-label="Range" color="success" value="20"></ion-range>
                  </ion-item>

                  <ion-item>
                    <ion-range aria-label="Range" color="warning" value="20"></ion-range>
                  </ion-item>

                  <ion-item>
                    <ion-range aria-label="Range" color="danger" value="20"></ion-range>
                  </ion-item>
                </ion-list>
              </section>

              <section>
                <ion-list>
                  <ion-item>
                    <ion-checkbox checked>Default</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="primary" checked>Primary</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="secondary" checked>Secondary</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="warning" checked>Warning</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="danger" checked>Danger</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="light" checked>Light</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox color="dark" checked>Dark</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox>Unchecked by Default</ion-checkbox>
                  </ion-item>
                  <ion-item>
                    <ion-checkbox disabled>Disabled</ion-checkbox>
                  </ion-item>

                  <ion-item>
                    <ion-toggle>Blueberry</ion-toggle>
                  </ion-item>

                  <ion-item>
                    <ion-toggle color="success" checked>Lettuce</ion-toggle>
                  </ion-item>

                  <ion-item>
                    <ion-toggle color="danger" checked>Apple</ion-toggle>
                  </ion-item>

                  <ion-item>
                    <ion-toggle color="tertiary" checked>Radish</ion-toggle>
                  </ion-item>

                  <ion-item>
                    <ion-toggle color="dark" checked>Blackberry</ion-toggle>
                  </ion-item>
                </ion-list>
              </section>
            </div>
          </ion-content>
        </ion-tab>

        <ion-tab tab="colors">
          <ion-header>
            <ion-toolbar>
              <ion-title>Colors</ion-title>
              <div slot="end" class="right-container">
                <ion-select label="Select a Theme:" interface="popover" class="theme-picker">
                  <ion-select-option value="default" selected>Default</ion-select-option>
                  <ion-select-option value="oceanic">Oceanic</ion-select-option>
                  <ion-select-option value="vibrant">Vibrant</ion-select-option>
                  <ion-select-option value="dark">Dark</ion-select-option>
                </ion-select>
              </div>
            </ion-toolbar>
          </ion-header>

          <ion-content class="ion-padding">
            <div class="wrapper">
              <section>
                <p>
                  <ion-button color="primary">Primary</ion-button>
                  <ion-button color="secondary">Secondary</ion-button>
                  <ion-button color="tertiary">Tertiary</ion-button>
                  <ion-button fill="outline" color="success">Success Outline</ion-button>
                  <ion-button fill="clear" color="warning">Warning Clear</ion-button>
                  <ion-button color="danger">Danger</ion-button>
                  <ion-button color="light">Light</ion-button>
                  <ion-button color="dark">Dark</ion-button>
                  <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                  <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
                </p>

                <p>
                  <ion-button class="ion-focused" color="primary">Primary</ion-button>
                  <ion-button class="ion-focused" color="secondary">Secondary</ion-button>
                  <ion-button class="ion-focused" color="tertiary">Tertiary</ion-button>
                  <ion-button class="ion-focused" fill="outline" color="success">Success Outline</ion-button>
                  <ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button>
                  <ion-button class="ion-focused" color="danger">Danger</ion-button>
                  <ion-button class="ion-focused" color="light">Light</ion-button>
                  <ion-button class="ion-focused" color="dark">Dark</ion-button>
                  <ion-button class="ion-focused" expand="block" fill="outline" color="medium"
                    >Medium Outline</ion-button
                  >
                  <ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
                </p>

                <p>
                  <ion-button class="ion-activated" color="primary">Primary</ion-button>
                  <ion-button class="ion-activated" color="secondary">Secondary</ion-button>
                  <ion-button class="ion-activated" color="tertiary">Tertiary</ion-button>
                  <ion-button class="ion-activated" fill="outline" color="success">Success Outline</ion-button>
                  <ion-button class="ion-activated" fill="clear" color="warning">Warning Clear</ion-button>
                  <ion-button class="ion-activated" color="danger">Danger</ion-button>
                  <ion-button class="ion-activated" color="light">Light</ion-button>
                  <ion-button class="ion-activated" expand="block" fill="outline" color="medium"
                    >Medium Outline</ion-button
                  >
                  <ion-button class="ion-activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
                </p>
              </section>

              <section>
                <p>
                  <ion-button>Default</ion-button>
                  <ion-button>
                    <ion-icon slot="icon-only" name="star"></ion-icon>
                  </ion-button>
                  <ion-button> <ion-icon slot="start" name="pin"></ion-icon>Map </ion-button>
                  <ion-button shape="round">Round</ion-button>
                  <ion-button fill="outline">Outline</ion-button>
                  <ion-button fill="clear">Clear</ion-button>
                  <ion-button fill="outline" expand="full">Full Outline</ion-button>
                  <ion-button fill="clear" expand="block">Block Clear</ion-button>
                </p>

                <p>
                  <ion-fab-button>
                    <ion-icon name="logo-facebook"></ion-icon>
                  </ion-fab-button>
                  <ion-fab-button size="small">
                    <ion-icon name="logo-twitter"></ion-icon>
                  </ion-fab-button>
                  <ion-fab-button color="secondary">
                    <ion-icon name="logo-vimeo"></ion-icon>
                  </ion-fab-button>
                  <ion-fab-button color="tertiary">
                    <ion-icon name="logo-instagram"></ion-icon>
                  </ion-fab-button>
                </p>

                <p>
                  <ion-chip>
                    <ion-label>Default</ion-label>
                  </ion-chip>
                  <ion-chip color="primary">
                    <ion-label>Primary</ion-label>
                  </ion-chip>
                  <ion-chip color="secondary">
                    <ion-label>Secondary</ion-label>
                  </ion-chip>
                  <ion-chip color="tertiary">
                    <ion-label>Tertiary</ion-label>
                  </ion-chip>
                  <ion-chip color="success">
                    <ion-label>Success</ion-label>
                  </ion-chip>
                  <ion-chip color="warning">
                    <ion-label>Warning</ion-label>
                  </ion-chip>
                  <ion-chip color="danger">
                    <ion-label>Danger</ion-label>
                  </ion-chip>
                  <ion-chip color="light">
                    <ion-label>Light</ion-label>
                  </ion-chip>
                  <ion-chip color="medium">
                    <ion-label>Medium</ion-label>
                  </ion-chip>
                  <ion-chip color="dark">
                    <ion-label>Dark</ion-label>
                  </ion-chip>
                </p>

                <p>
                  <ion-badge></ion-badge>
                  <ion-badge color="primary">11</ion-badge>
                  <ion-badge color="secondary">22</ion-badge>
                  <ion-badge color="tertiary">33</ion-badge>
                  <ion-badge color="success">44</ion-badge>
                  <ion-badge color="warning">55</ion-badge>
                  <ion-badge color="danger">66</ion-badge>
                  <ion-badge color="light">77</ion-badge>
                  <ion-badge color="medium">88</ion-badge>
                  <ion-badge color="dark">99</ion-badge>
                </p>

                <p class="icon-section">
                  <ion-icon name="logo-ionic" color="primary"></ion-icon>
                  <ion-icon name="logo-angular"></ion-icon>
                  <ion-icon name="heart" color="danger"></ion-icon>
                  <ion-icon name="logo-ionitron" color="primary"></ion-icon>

                  <ion-icon name="happy" color="warning"></ion-icon>
                  <ion-icon name="people"></ion-icon>
                  <ion-icon name="person" color="tertiary"></ion-icon>
                  <ion-icon name="person-circle"></ion-icon>

                  <ion-icon name="apps"></ion-icon>
                  <ion-icon name="lock-closed"></ion-icon>
                  <ion-icon name="key" color="success"></ion-icon>
                  <ion-icon name="lock-open"></ion-icon>

                  <ion-icon name="map" color="secondary"></ion-icon>
                  <ion-icon name="navigate"></ion-icon>
                  <ion-icon name="pin"></ion-icon>
                  <ion-icon name="locate"></ion-icon>

                  <ion-icon name="mic"></ion-icon>
                  <ion-icon name="musical-notes" color="warning"></ion-icon>
                  <ion-icon name="volume-high"></ion-icon>
                  <ion-icon name="mic" color="tertiary"></ion-icon>

                  <ion-icon name="cafe" color="success"></ion-icon>
                  <ion-icon name="calculator"></ion-icon>
                  <ion-icon name="bus"></ion-icon>
                  <ion-icon name="wine" color="danger"></ion-icon>
                </p>

                <p>
                  <ion-breadcrumbs color="primary" max-items="4">
                    <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb>
                    <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
                    <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
                    <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
                    <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
                    <ion-breadcrumb> 35 mm </ion-breadcrumb>
                  </ion-breadcrumbs>

                  <ion-breadcrumbs color="secondary" max-items="4">
                    <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb>
                    <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
                    <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
                    <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
                    <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
                    <ion-breadcrumb> 35 mm </ion-breadcrumb>
                  </ion-breadcrumbs>

                  <ion-breadcrumbs color="danger" max-items="4">
                    <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb>
                    <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
                    <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
                    <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
                    <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
                    <ion-breadcrumb> 35 mm </ion-breadcrumb>
                  </ion-breadcrumbs>

                  <ion-breadcrumbs color="warning" max-items="4">
                    <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb>
                    <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
                    <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
                    <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
                    <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
                    <ion-breadcrumb> 35 mm </ion-breadcrumb>
                  </ion-breadcrumbs>
                </p>
              </section>

              <section>
                <p>
                  <ion-searchbar></ion-searchbar>
                  <ion-searchbar color="primary"></ion-searchbar>
                  <ion-searchbar color="tertiary"></ion-searchbar>
                  <ion-searchbar color="warning"></ion-searchbar>
                  <ion-searchbar color="light"></ion-searchbar>
                  <ion-searchbar color="dark"></ion-searchbar>
                </p>
                <p>
                  <ion-segment value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>

                  <ion-segment color="primary" value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>

                  <ion-segment color="secondary" value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>

                  <ion-segment color="success" value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>

                  <ion-segment color="light" value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>

                  <ion-segment color="medium" value="all">
                    <ion-segment-button value="all">
                      <ion-label>All</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="favorites">
                      <ion-label>Favorites</ion-label>
                    </ion-segment-button>
                  </ion-segment>
                </p>
              </section>

              <section>
                <p>
                  <ion-toolbar>
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Toolbar</ion-title>
                  </ion-toolbar>

                  <ion-toolbar color="primary">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-segment value="favorites">
                      <ion-segment-button value="all">All</ion-segment-button>
                      <ion-segment-button value="favorites">Favorites</ion-segment-button>
                    </ion-segment>
                  </ion-toolbar>

                  <ion-toolbar color="secondary">
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-searchbar></ion-searchbar>
                  </ion-toolbar>

                  <ion-toolbar color="tertiary">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Tertiary</ion-title>
                  </ion-toolbar>

                  <ion-toolbar color="success">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Success</ion-title>
                  </ion-toolbar>

                  <ion-toolbar color="warning">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Warning</ion-title>
                  </ion-toolbar>

                  <ion-toolbar color="danger">
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-searchbar></ion-searchbar>
                  </ion-toolbar>

                  <ion-toolbar color="light">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-segment value="favorites">
                      <ion-segment-button value="all">All</ion-segment-button>
                      <ion-segment-button value="favorites">Favorites</ion-segment-button>
                    </ion-segment>
                  </ion-toolbar>

                  <ion-toolbar color="medium">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Medium</ion-title>
                  </ion-toolbar>

                  <ion-toolbar color="dark">
                    <ion-buttons slot="start">
                      <ion-button color="danger">
                        <ion-icon slot="icon-only" name="add"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-buttons slot="primary">
                      <ion-button>
                        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                      </ion-button>
                    </ion-buttons>
                    <ion-title>Dark</ion-title>
                  </ion-toolbar>
                </p>

                <p>
                  <ion-progress-bar value="0.5"></ion-progress-bar>
                  <ion-progress-bar value="0.5" color="secondary"></ion-progress-bar>
                  <ion-progress-bar value="0.5" color="tertiary"></ion-progress-bar>
                  <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
                  <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
                  <ion-progress-bar value="0.2" buffer="0.3" color="success"></ion-progress-bar>
                  <ion-progress-bar value="0.5" color="light"></ion-progress-bar>
                  <ion-progress-bar value="0.5" color="medium"></ion-progress-bar>
                  <ion-progress-bar value="0.2" buffer="0.3" color="dark"></ion-progress-bar>
                </p>
              </section>
            </div>
          </ion-content>
        </ion-tab>

        <ion-tab tab="overlays">
          <ion-header>
            <ion-toolbar>
              <ion-title>Overlays</ion-title>
              <div slot="end" class="right-container">
                <ion-select label="Select a Theme:" interface="popover" class="theme-picker">
                  <ion-select-option value="default" selected>Default</ion-select-option>
                  <ion-select-option value="oceanic">Oceanic</ion-select-option>
                  <ion-select-option value="vibrant">Vibrant</ion-select-option>
                  <ion-select-option value="dark">Dark</ion-select-option>
                </ion-select>
              </div>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <div class="wrapper">
              <!-- <section> -->
              <ion-list>
                <ion-item button onClick="presentAlert()">
                  <ion-label>Present Alert</ion-label>
                </ion-item>
                <ion-item button onClick="presentActionSheet()">
                  <ion-label>Present Action Sheet</ion-label>
                </ion-item>
                <ion-item button onClick="presentLoading()">
                  <ion-label>Present Loading</ion-label>
                </ion-item>
                <ion-item button onClick="presentModal()">
                  <ion-label>Present Modal</ion-label>
                </ion-item>
                <ion-item button onClick="presentPopover(event)">
                  <ion-label>Present Popover</ion-label>
                </ion-item>
                <ion-item button onClick="presentToast()">
                  <ion-label>Present Toast</ion-label>
                </ion-item>
                <ion-item>
                  <ion-label>Datetime</ion-label>
                  <ion-datetime></ion-datetime>
                </ion-item>
                <ion-item>
                  <ion-select label="Select">
                    <ion-select-option>1</ion-select-option>
                    <ion-select-option>2</ion-select-option>
                    <ion-select-option>3</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>
              <!-- </section> -->
            </div>
          </ion-content>
        </ion-tab>
      </ion-tabs>
    </ion-app>

    <script>
      const selects = document.querySelectorAll('.theme-picker');

      for (let i = 0; i < selects.length; i++) {
        selects[i].addEventListener('ionChange', (ev) => {
          const theme = event.detail && event.detail.value;
          toggleTheme(theme);
        });
      }

      function toggleTheme(theme) {
        var cssFile = `/src/themes/test/css-variables/css/${theme}.css`;

        var oldLink = document.getElementById('theme');

        var newLink = document.createElement('link');
        newLink.setAttribute('id', 'theme');
        newLink.setAttribute('rel', 'stylesheet');
        newLink.setAttribute('type', 'text/css');
        newLink.setAttribute('href', cssFile);

        document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);

        for (let i = 0; i < selects.length; i++) {
          selects[i].value = theme;
        }
      }

      async function presentAlert() {
        const alert = Object.assign(document.createElement('ion-alert'), {
          header: 'Alert',
          subHeader: 'Subtitle',
          message: 'This is an alert message.',
          buttons: ['OK'],
        });
        document.body.appendChild(alert);
        return await alert.present();
      }

      async function presentActionSheet() {
        const actionSheet = Object.assign(document.createElement('ion-action-sheet'), {
          header: 'Albums',
          buttons: [
            {
              text: 'Delete',
              role: 'destructive',
              icon: 'trash',
              handler: () => {
                console.log('Delete clicked');
              },
            },
            {
              text: 'Share',
              icon: 'share',
              handler: () => {
                console.log('Share clicked');
              },
            },
            {
              text: 'Play (open modal)',
              icon: 'chevron-forward-circle',
              handler: () => {
                console.log('Play clicked');
              },
            },
            {
              text: 'Favorite',
              icon: 'heart',
              handler: () => {
                console.log('Favorite clicked');
              },
            },
            {
              text: 'Cancel',
              icon: 'close',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              },
            },
          ],
        });
        document.body.appendChild(actionSheet);
        await actionSheet.present();
      }

      async function presentLoading() {
        const loading = Object.assign(document.createElement('ion-loading'), {
          message: 'Hellooo',
          duration: 2000,
        });
        document.body.appendChild(loading);

        await loading.present();

        const { role, data } = await loading.onDidDismiss();

        console.log('Loading dismissed!');
      }

      async function createModal() {
        // initialize controller
        // create component to open
        const element = document.createElement('div');
        element.innerHTML = `
      <ion-header translucent="true">
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
          <ion-buttons slot="start">
            <ion-button class="dismiss">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content fullscreen="true">
        <ion-header collapse="condense">
          <ion-toolbar>
            <ion-title size="large">Super Modal</ion-title>
          </ion-toolbar>
        </ion-header>

        <br />

        <div>
          <ion-list>
            <ion-item>
              <ion-label>Item A</ion-label>
            </ion-item>
            <ion-item>
              <ion-label>Item B</ion-label>
            </ion-item>
            <ion-item>
              <ion-label>Item C</ion-label>
            </ion-item>
          </ion-list>
        </div>
      </ion-content>
      `;

        // present the modal
        const modalElement = Object.assign(document.createElement('ion-modal'), {
          component: element,
          presentingElement: document.querySelector('ion-tabs'),
        });

        // listen for close event
        const button = element.querySelector('ion-button');
        button.addEventListener('click', () => {
          modalElement.dismiss();
        });
        document.body.appendChild(modalElement);
        return modalElement;
      }

      async function presentModal() {
        const modal = await createModal();
        await modal.present();
      }

      async function presentPopover(event) {
        const popoverElement = Object.assign(document.createElement('ion-popover'), {
          component: 'profile-page',
          event: event,
        });
        document.body.appendChild(popoverElement);
        return await popoverElement.present();
      }

      class ProfilePage extends HTMLElement {
        constructor() {
          super();
        }

        connectedCallback() {
          this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header>
                <ion-label>
                  Ionic
                </ion-label>
              </ion-list-header>
              <ion-item><ion-label>Item 0</ion-label></ion-item>
              <ion-item><ion-label>Item 1</ion-label></ion-item>
              <ion-item><ion-label>Item 2</ion-label></ion-item>
              <ion-item><ion-label>Item 3</ion-label></ion-item>
            </ion-list>
          </ion-content>
        `;
        }
      }

      customElements.define('profile-page', ProfilePage);

      async function presentToast() {
        const toast = Object.assign(document.createElement('ion-toast'), {
          message: 'Hello world!',
          buttons: [{ text: 'Close', role: 'close' }],
        });
        document.body.appendChild(toast);
        await toast.present();
      }
    </script>
  </body>
</html>
